<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>高性能的jQuery/Zepto 3D旋转木马插件|DEMO1_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" href="css/common.css">
	<style>
	body{
	background: #16235e;
      background: -moz-linear-gradient(top, #16235e 0%, #020223 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#16235e), color-stop(100%,#020223)); /* Chrome, Safari4+ */
      background: -webkit-linear-gradient(top, #16235e 0%, #020223 100%); /* Chrome10+, Safari5.1+ */
      background: -o-linear-gradient(top, #16235e 0%, #020223 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #16235e 0%, #020223 100%); /* IE10+ */
      background: linear-gradient(to bottom, #16235e 0%, #020223 100%); /* W3C */
	}
    a {
      color: #da2020;
    }
    a:hover {
      color: #d6f300;
    }
    .wrap > h1 {
      margin: 26px auto;
    }
    #showcase {
      height: 460px;
      
      border-radius: 8px;
    }
    #item-title {
      color: #F31414;
      font-size: 29px;
      letter-spacing: 0.13em;
      text-shadow: 1px 1px 6px #C72B2B;
      text-align: center;
      margin-top: 30px;
      margin-bottom: 22px;
    }
    #nav {
      margin-top: 10px;
      text-align: center;
    }
    #nav > button {
      width: 64px;
      height: 36px;
      color: #666;
      font: bold 16px arial;
      text-align: center;
      margin: 5px;
      text-shadow: 0px 1px 0px #f5f5f5;
      background: #f6f6f6;
      border: solid 2px rgba(0, 0, 0, 0.4);
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      -webkit-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4);
      box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4);
      cursor: pointer;
    }
    #nav > button:active,
    #nav > button.down {
      background: #dfdfdf;
      border: solid 2px rgba(0, 0, 0, 0.6);
      box-shadow: none;
    }
    #share {
      top: -9px;
    }
    #credits {
      top: -15px;
    }
  </style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>高性能的jQuery/Zepto 3D旋转木马插件 <span>A 3D perspective carousel using jQuery/Zepto focused on performance</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201507052167.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
			<div class="htmleaf-demo center">
			  <a href="index.html" class="current">DEMO1</a>
			  <a href="index2.html">DEMO2</a>
			</div>
		</header>
		<div class="wrap">
			<div id="showcase" class="noselect">
		      <img class="cloud9-item" src="images/browsers/firefox.png" alt="Firefox">
		      <img class="cloud9-item" src="images/browsers/wyzo.png" alt="Wyzo">
		      <img class="cloud9-item" src="images/browsers/opera.png" alt="Opera">
		      <img class="cloud9-item" src="images/browsers/chrome.png" alt="Chrome">
		      <img class="cloud9-item" src="images/browsers/iexplore.png" alt="Internet Explorer">
		      <img class="cloud9-item" src="images/browsers/safari.png" alt="Safari">
		    </div>
		</div>
		<div id="nav" class="noselect">
	        <button class="left">
	          ←
	        </button>
	        <button class="right">
	          →
	        </button>
	      </div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201505241897.html">
			  <img src="related/1.jpg" width="300" alt="jQuery和CSS3炫酷响应式支持触摸屏的3D旋转木马特效"/>
			  <h3>jQuery和CSS3炫酷响应式支持触摸屏的3D旋转木马特效</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201504091651.html">
			  <img src="related/2.jpg" width="300" alt="基于Threejs的jQuery 3d图片旋转木马特效插件"/>
			  <h3>基于Threejs的jQuery 3d图片旋转木马特效插件</h3>
			</a>
		</div>
	</div>
	
	<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src="js/jquery.reflection.js"></script>
  	<script src="js/jquery.cloud9carousel.js"></script>
  <script>
    $(function() {
      var showcase = $("#showcase"), title = $('#item-title')

      showcase.Cloud9Carousel( {
        yOrigin: 42,
        yRadius: 48,
        mirror: {
          gap: 12,
          height: 0.2
        },
        buttonLeft: $("#nav > .left"),
        buttonRight: $("#nav > .right"),
        autoPlay: 1,
        bringToFront: true,
        onRendered: rendered,
        onLoaded: function() {
          showcase.css( 'visibility', 'visible' )
          showcase.css( 'display', 'none' )
          showcase.fadeIn( 1500 )
        }
      } )

      function rendered( carousel ) {
        title.text( carousel.nearestItem().element.alt )

        // Fade in based on proximity of the item
        var c = Math.cos((carousel.floatIndex() % 1) * 2 * Math.PI)
        title.css('opacity', 0.5 + (0.5 * c))
      }

      //
      // Simulate physical button click effect
      //
      $('#nav > button').click( function( e ) {
        var b = $(e.target).addClass( 'down' )
        setTimeout( function() { b.removeClass( 'down' ) }, 80 )
      } )

      $(document).keydown( function( e ) {
        //
        // More codes: http://www.javascripter.net/faq/keycodes.htm
        //
        switch( e.keyCode ) {
          /* left arrow */
          case 37:
            $('#nav > .left').click()
            break

          /* right arrow */
          case 39:
            $('#nav > .right').click()
        }
      } )
    })
  </script>
</body>
</html>